---
id: avatar
title: Avatar
---

import Playground from '@theme/Playground';

## Various Orientations

### Horizontal

<Playground>
  <div class="avatar">
    <a
      class="avatar__photo-link avatar__photo avatar__photo--lg"
      href="https://twitter.com/dan_abramov">
      <img
        alt="Dan Abramov Profile"
        src="https://avatars1.githubusercontent.com/u/810438?s=460"
      />
    </a>
    <div class="avatar__intro">
      <h4 class="avatar__name">Dan Abramov</h4>
      <small class="avatar__subtitle">
        Working on @reactjs. Co-author of Redux and Create React App.
      </small>
    </div>
  </div>
</Playground>

### Vertical

<Playground>
  <div class="avatar avatar--vertical">
    <img
      class="avatar__photo avatar__photo--xl"
      src="https://avatars1.githubusercontent.com/u/977348?s=460&v=4"
    />
    <div class="avatar__intro">
      <h4 class="avatar__name">Jordan Walke</h4>
      <small class="avatar__subtitle">
        Maker of things: ReactJS. Working on:
        <a href="https://twitter.com/reasonml">@reasonml</a>. At: Facebook Engineering.
      </small>
    </div>
  </div>
</Playground>

## Various Sizes

### Small

<Playground>
<div class="avatar">
  <img
    class="avatar__photo avatar__photo--sm"
    src="https://avatars3.githubusercontent.com/u/13352?s=400&v=4"
  />
  <div class="avatar__intro">
    <h5 class="avatar__name">Christoph Pojer</h5>
  </div>
</div>

</Playground>

### Default

<Playground>
  <div class="avatar">
    <img
      class="avatar__photo"
      src="https://avatars1.githubusercontent.com/u/165856?s=460&v=4"
    />
    <div class="avatar__intro">
      <h4 class="avatar__name">Hector Ramos</h4>
      <small class="avatar__subtitle">React Native @facebook</small>
    </div>
  </div>
</Playground>

### Large

<Playground>
  <div class="avatar">
    <img
      class="avatar__photo avatar__photo--lg"
      src="https://avatars2.githubusercontent.com/u/197597?s=460"
    />
    <div class="avatar__intro">
      <h4 class="avatar__name">Christopher Chedeau</h4>
      <small class="avatar__subtitle">Frenchy Front End Engineer</small>
    </div>
  </div>
</Playground>

### Extra Large

<Playground>
  <div class="avatar">
    <img
      class="avatar__photo avatar__photo--xl"
      src="https://avatars0.githubusercontent.com/u/3757713?s=460&v=4"
    />
    <div class="avatar__intro">
      <h4 class="avatar__name">Joel Marcey</h4>
      <small class="avatar__subtitle">
        Developer Advocate at Facebook, co-creator of Docusaurus
      </small>
    </div>
  </div>
</Playground>
